<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>绘制三条不同颜色和宽度的平行线</title>
	<style type="text/css">
		canvas{
			border: 1px solid #ccc;
		}
	</style>
</head>
<body>
<!-- 1.准备画布 -->
<!-- 1.1 画布时是白色 而且默认300*150 -->
<!-- 1.2 设置画布的大小 width='600' height="400" -->
<canvas width="600" height="400"></canvas>
<div id="main"></div>
<div class="asd"></div>
<!-- 2.准备绘制工具 -->
<!-- 3.利用工具绘图 -->
<script type="text/javascript">
// 1.获取元素
var myCanvas = document.querySelector('canvas');
// 2.获取上下文，绘制工具箱(web gl 绘制3d效果的网页技术)
var ctx = myCanvas.getContext('2d');
// 3.移动画笔
ctx.beginPath();
ctx.moveTo(100,100);
// 4.绘制直线（轨迹，绘制路径）
ctx.lineTo(200,100);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 10;
ctx.stroke();

// 6.平行线
ctx.beginPath();
ctx.moveTo(100,200);
ctx.lineTo(200,200);
ctx.strokeStyle = 'red';
ctx.lineWidth = 20;
// 5.描边
ctx.stroke();


</script>
</body>
</html>